import React from "react";
import { withRouter } from "react-router-dom";
import { Layout, Row, Col } from 'antd';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import routers from "@/router/routers";
import UserMenu from "./menu";
import layoutCss from "./index.module.css";
import Breadcrumb from "./Breadcrumb";


const { Header, Sider, Content } = Layout;
// 这是不应该展示在ui内的组件
let excludes = ["/page404", "/login"];
// 这里储存过滤掉 excludes 内路由的路由
let menus = [];
routers.forEach(item => {
    // 当遍历的内容不在excludes中，则放到新数组内
    let flag = excludes.includes(item.path);
    if (!flag) {
        menus.push(item)
    }
})
// 把首页路由放到第一个
menus.splice(0, 0, menus.splice(-1)[0])


@withRouter
class BaseLayout extends React.Component {
    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    render() {
        let { location } = this.props;
        let hasInclude = excludes.includes(location.pathname);

        if (hasInclude) {
            let { children } = this.props;
            return children;
        } else {
            return (
                <Layout>
                    <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                        {/* logo */}
                        <div className={layoutCss.logo}></div>
                        {/* 测边导航栏，传递过滤后的新数组让菜单栏自动生成 */}
                        <UserMenu menus={menus} jump={this.props}></UserMenu>
                    </Sider>

                    <Layout className="site-layout">
                        {/* 头部 */}
                        <Header className="site-layout-background" style={{ padding: 0 }}>
                            <Row>
                                <Col span={8} className={layoutCss.icon_shouqi}>
                                    {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                        className: 'trigger',
                                        onClick: this.toggle,
                                    })}
                                </Col>
                                <Col span={8}>
                                    <h1 className={layoutCss.head_title}>娱宽聚力智慧后台</h1>
                                </Col>
                                <Col span={8} className={layoutCss.head_quit}>
                                    <b>欢迎您：<span>xxx</span></b>
                                    <a href="#">退出</a>
                                </Col>
                            </Row>
                        </Header>

                        {/* 内容区域 */}
                        <Content
                            className="site-layout-background"
                            style={{
                                margin: '24px 16px',
                                padding: 24,
                                minHeight: 280,
                            }}>
                            <Breadcrumb></Breadcrumb>
                            {this.props.children}
                        </Content>
                    </Layout>
                </Layout>
            );
        }

    }
}

export default BaseLayout;